
import './../style/page5.scss'
import './../style/sweetalert-overlay.scss';
import $ from 'jquery'
import Swal from 'sweetalert2'
// 判断输入输出是否正确
let isName1, isPhone1
let isName, isPhone

modal()
inputChange1()
inputChange2()
chooseAuto('#choose1', 'chooseImg1', '.name1', '.phone1')
chooseAuto('#choose2', 'chooseImg2', '.name', '.phone')
infoBox()


// 复制微信事件触发
document.querySelector('.add-wechat .right').addEventListener('click', function () {

    copyWechat()

})

// 发送请求事件触发 页面中

document.querySelector('#submit1')?.addEventListener('click', (e) => {
    e.preventDefault();

    inputChange1().then((res) => {
        if (res) {
            console.log('合法，发送请求',res);

            $.ajax({
                //请求方式
                type: "POST",
                //请求的媒体类型
                Headers: {
                    "Access-Control-Allow-Origin": "*"
                },
                //请求地址
                url: "http://lawyeracloud.seo.com.cn/Api/ApiUn/AddUnknownApi",
                //数据，json字符串
                data: {
                    name: res.name,
                    phone: res.phone,
            
                },
                //请求成功
                success: function (result) {
                    console.log(result);
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });

            

            Swal.fire({
                position: 'center',
                icon: 'success',
                title: '提交成功',
                showConfirmButton: false,
                timer: 1500
            })



            // 隐藏模态框

            $("#showModal").animate({
                height: "hide",
            }, 500);
            $('#modalOuter').hide();

            $('.name1').val('')
            $('.phone1').val('')
        } else {
            console.log('不合法',);

            Swal.fire({
                position: 'center',
                icon: 'error',
                title: '请输入正确的信息',
                showConfirmButton: false,
                timer: 1500
            })


        }

    })

})

// 发送请求事件触发

document.querySelector('#modalSubmit')?.addEventListener('click', (e) => {
    e.preventDefault();

    inputChange2().then((res) => {
        if (res) {
            $.ajax({
                //请求方式
                type: "POST",
                //请求的媒体类型
                Headers: {
                    "Access-Control-Allow-Origin": "*"
                },
                //请求地址
                url: "http://lawyeracloud.seo.com.cn/Api/ApiUn/AddUnknownApi",
                //数据，json字符串
                data: {
                    name: res.name,
                    phone: res.phone,
            
                },
                //请求成功
                success: function (result) {
                    console.log(result);
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });

            Swal.fire({
                position: 'center',
                icon: 'success',
                title: '提交成功',
                showConfirmButton: false,
                timer: 1500
            })

            // 隐藏模态框

            $("#showModal").animate({
                height: "hide",
            }, 500);
            $('#modalOuter').hide();

            $('.name').val('')
            $('.phone').val('')
        } else {
            console.log('不合法',);

            Swal.fire({
                position: 'center',
                icon: 'error',
                title: '请输入正确的信息',
                showConfirmButton: false,
                timer: 1500
            })


        }

    })

})



// 判断输入内容是否符合规范  页面中
async function inputChange1() {
    let name = document.querySelector('.name1')

    let res = false, res2 = false;

    await name.addEventListener('change', () => {
        const reg1 = /^[\u4e00-\u9fa5]{2,8}$/
        res = reg1.test(name.value)
        if (res) {
            isName1 = true
        } else {
            isName1 = false
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: '请输入2-8位姓名',
                showConfirmButton: false,
                timer: 1000
            })
        }

    })

    let phone = document.querySelector('.phone1')
    await phone.addEventListener('change', () => {
        const reg2 = /^1[0-9]{10}$/

        res2 = reg2.test(phone.value)
        if (res2) {
            isPhone1 = true
        } else {
            isPhone1 = false
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: '请输入正确的手机号',
                showConfirmButton: false,
                timer: 1000
            })
        }

    })


    if (isName1 && isPhone1) {
        return {
            name:name.value,
            phone:phone.value,
        }

    }
    return false
}

// 判断输入内容是否符合规范
async function inputChange2() {
    let name = document.querySelector('.name')

    let res = false, res2 = false;

    await name.addEventListener('change', () => {
        const reg1 = /^[\u4e00-\u9fa5]{2,8}$/
        res = reg1.test(name.value)
        if (res) {
            isName = true
        } else {
            isName = false
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: '请输入2-8位姓名',
                showConfirmButton: false,
                timer: 1000
            })
        }

    })

    let phone = document.querySelector('.phone')
    await phone.addEventListener('change', () => {
        const reg2 = /^1[0-9]{10}$/

        res2 = reg2.test(phone.value)
        if (res2) {
            isPhone = true
        } else {
            isPhone = false
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: '请输入正确的手机号',
                showConfirmButton: false,
                timer: 1000
            })
        }

    })


    if (isName && isPhone) {
        return {
            name:name.value,
            phone:phone.value,
        }

    }
    return false
}

//模态框显示与隐藏
function modal() {

    // 模态框显示
    $(".call-me .left").click(function () {
        $("#showModal").animate({
            height: "show",
        }, 500);
        $("#modalOuter").show();
    });
    $(".common-block .right").click(function () {
        $("#showModal").animate({
            height: "show",
        }, 500);
        $("#modalOuter").show();
    });


    //模态框隐藏
    $("#closeBtn").click(function () {
        $("#showModal").animate({
            height: "hide",
        }, 500);
        $('#modalOuter').hide();
    });

    $("#modalOuter").click(function () {
        $("#showModal").animate({
            height: "hide",
        }, 500);
        $('#modalOuter').hide();
    });
}



// 复制微信号 并弹出确认框

function copyWechat() {
    // 整一个input
    var input = document.createElement("input");
    // 赋值
    input.setAttribute("value", '13336134054');
    // 添加节点
    document.body.appendChild(input);
    // 选取文本域中的内容
    input.select();
    // 复制
    document.execCommand('Copy');
    // 删除掉没用的节点
    document.body.removeChild(input);

    Swal.queue([{
        icon: 'success',
        title: '复制成功',
        confirmButtonText: '知道了',
        text:
            `微信号: 13336134054
        添加微信好友, 详细了解产品`,

        showLoaderOnConfirm: true,

        customClass: {

            confirmButton: 'sweet-button',

        }
    }])
}

// 点击小图标
function chooseAuto(clickSpanId, imgId, nameInputClass, phoneInputClass) {
    // 设置勾选和未勾选
    document.querySelector(clickSpanId)?.addEventListener('click', function () {
        let img = document.getElementById(imgId)
        let nameBox = document.querySelector(nameInputClass)
        let phoneBox = document.querySelector(phoneInputClass)
        if (img.getAttribute('style') == 'display:none') {
            // 勾选
            img.setAttribute('style', '')
            nameBox.setAttribute('autocomplete', 'on')
            phoneBox.setAttribute('autocomplete', 'on')

        } else {
            // 未勾选
            nameBox.setAttribute('autocomplete', 'off')
            phoneBox.setAttribute('autocomplete', 'off')
            img.setAttribute('style', 'display:none')

        }

    })

}


// 显示个人信息授权
function infoBox() {
    let privactArr = document.querySelectorAll('.privacy')
    privactArr.forEach((item) => {
        item.addEventListener('click', () => {
            Swal.fire({
                title: '个人信息授权与隐私政策',
                html:
                    ' 尊敬的用户，您选择使用“自动输入历史信息”功能，您同意本平台在法律允许的范围内，收集您输入的信息，您已知晓并同意在您浏览使用本平台建站服务搭建的页面时， 我们会帮您预先填写上次输入的历史信息，您的历史信息仅用于页面的预填充，且只有您点击提交按钮之后信息才会传递给商家使用。 本平台非常重视用户信息的保护，详见' +
                    '<a style="color:#405b95;" href="https://fe-resource.cdn.bcebos.com/mip/fengming/form/Interactive_optimization_of_privacy_protocol_corresponding.html">《隐私政策》</a> ',

                showCloseButton: true,
                confirmButtonText:
                    '确定',

            })
        })
    })
}


$('.menu-style').click(() => {
    if ($('.menu-style').children('img.menu-svg').css('display') == 'none') {

        $('.menu-style').children('img.menu-svg').css('display', 'block')
        $('.menu-style').children('img.close-svg').css('display', 'none')
    } else {

        $('.menu-style').children('img.menu-svg').css('display', 'none')
        $('.menu-style').children('img.close-svg').css('display', 'block')
    }
    $('.menu-list').slideToggle()
})